<script setup>
import {useMenuStore} from "@/stores/menu.js";
import {storeToRefs} from "pinia";
import {useRouter} from "vue-router";
import SvgIcon from "@/components/svgicon/index.vue";


const router = useRouter()
const menuStore = useMenuStore()
const {menuList} = storeToRefs(menuStore)

function hashChildren(menu) {
  return menu.children && menu.children.length > 0;
}

function handleRouter(menu) {
  let hasNode = menuStore.tabList.filter(item => {
    item.path === menu.path
  })
  if (hasNode == null || hasNode.length == 0) {
    let data = {title: menu.menuName, path: menu.path}
    menuStore.setTabList(data)
  }
  menuStore.setActiveTab(menu.path)
  router.push(menu.path)
}

</script>

<template>
  <div>
    <el-menu
        background-color="#a2c5c9"
    >
      <template v-for="menu in menuList" :key="menu.path">
        <el-sub-menu v-if="hashChildren(menu)" :index="menu.path">
          <template #title>
            <svg-icon
                v-if="menu.icon"
                slot="prefix"
                :name="menu.icon"
                width="20px"
                height="20px"
            />
            <span>{{ menu.menuName }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item v-for="children in menu.children" :index="children.path" @click="handleRouter(children)">
              <svg-icon
                  v-if="children.icon"
                  slot="prefix"
                  :name="children.icon"
                  width="20px"
                  height="20px"
              />
              <span>{{ children.menuName }}</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-menu-item v-else :index="menu.path">
          <svg-icon
              v-if="menu.icon"
              slot="prefix"
              :name="menu.icon"
              width="20px"
              height="20px"
          />
          <span>{{ menu.menuName }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<style scoped>

</style>